<template>
  <div class="operator-chart-box four-scroll-y">
    <component :is="getChartType[selectNode.data.algType]" />
  </div>
</template>

<script lang="ts">
/**
 * 经济类算子节点
 */
import { Component, Vue, Watch } from 'vue-property-decorator'
// 数据平滑图表
import DataSmoothingChart from '@/components/studio/data/node-edit-panel/operator-chart/DataSmoothingChart.vue'
// 时间序列分解
import TimeSeriesDecompositionChart from '@/components/studio/data/node-edit-panel/operator-chart/TimeSeriesDecompositionChart.vue'
// 时间序列移位
import ShiftingChart from '@/components/studio/data/node-edit-panel/operator-chart/ShiftingChart.vue'
import OutlierIdentificationChart from '@/components/studio/data/node-edit-panel/operator-chart/OutlierIdentificationChart.vue'
import NeighborAnalysisChart from '@/components/studio/data/node-edit-panel/operator-chart/NeighborAnalysisChart.vue'
import DataStore from '@/store/modules/dataview'
import { isEqual } from 'lodash'

@Component({
  components: {
    DataSmoothingChart,
    NeighborAnalysisChart,
    TimeSeriesDecompositionChart,
    OutlierIdentificationChart,
    ShiftingChart,
  },
})
export default class OperatorChart extends Vue {
  public getChartType: any = {
    1: 'outlier-identification-chart',
    2: 'neighbor-analysis-chart',
    6: 'time-series-decomposition-chart',
    7: 'data-smoothing-chart',
    10: 'shifting-chart',
  }

  private get selectNode() {
    return DataStore.selectNode || {}
  }

  public get selectNodeTableInfo() {
    // 节点id和表名组成的唯一信息
    return DataStore.selectNodeTableInfo || { nodeId: '', tableName: '' }
  }

  // 与 DataTable.vue 同理
  @Watch('selectNodeTableInfo', { immediate: true })
  public watchSelectNodeTableInfo(newValue: any, oldValue: any) {
    if (isEqual(newValue, oldValue)) {
      return
    }
    const { tableName } = newValue
    if (tableName) {
      this.queryChartData()
    }
  }

  // 获取图表数据
  public async queryChartData() {
    await DataStore.taskQueryDataVis()
  }
}
</script>

<style lang="less" scoped>
@import '@/styles/scroll-bar';

.operator-chart-box {
  background: #fafafc;
  border-left: 1px solid #e9e9e9;
  height: 100%;
  padding: 16px 20px;
}
</style>
